/**
 * 首页工厂弹框组件
 */
<script setup>
import { useFactoryStore } from '@/stores/home'

const factoryStore = useFactoryStore()
</script>

<template>
  <div id="home-factory-popup">
    <el-dialog
      v-model="factoryStore.isShow"
      title="生产工厂"
      top="5vh"
      width="70vw"
      center
    >
      <div class="factory-option">
        <RouterLink
          v-for="factory in factoryStore.getData()"
          :key="factory.eng_sim"
          :to="{ name: 'factory', query: { factory: factory.eng_sim } }"
          @click="factoryStore.hidden()"
          class="factory-option-item"
        >
          <span class="factory-option-english">
            {{ factory.eng_sim }}
          </span>

          <span class="factory-option-chinese">
            {{ factory.chn_sim }}
          </span>
        </RouterLink>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
#home-factory-popup {
  --el-bg-color: rgba(45, 54, 83, 0.8);

  &:deep(.el-dialog) {
    border-radius: 2vh;
    box-shadow: 0 0 10px white;
  }

  &:deep(.el-dialog__title) {
    color: white;
    font-size: 2.5vh;
    font-weight: normal;
  }

  &:deep(.el-dialog__close) {
    color: white;
    font-size: 2.5vh;
  }

  .factory-option {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;

    .factory-option-item {
      width: 18%;
      height: 20vh;
      margin: 1%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: linear-gradient(to right bottom, #2f65ba, #6e41be);
      border-radius: 2vh;
      cursor: pointer;
      transition: all 0.25s ease-in-out;

      &:hover {
        box-shadow: 0 0 10px white;
        filter: hue-rotate(15deg) saturate(200%);
      }

      .factory-option-english {
        color: white;
        font-size: 8vh;
        font-weight: normal;
        margin-bottom: 10%;
      }

      .factory-option-chinese {
        color: white;
        font-size: 2.5vh;
        font-weight: normal;
      }
    }
  }
}
</style>